<template>
  <div class="group-test">
    <div class="chose-course-top">
      <div class="header-left">
        <span class="back-arrow" @click="quitStudy"></span>
      </div>

      <div class="course-title">
        组内循环
      </div>
      <div class="btn-group">
        <a-button
          @click="studyNext"
          class="check-submit"
          type="primary"
          shape="round"
          >学下一句</a-button
        >
      </div>
    </div>
    <div class="group-test-list">
      <div class="group-test-content">
        <GroupItem
          @recordSuccess="recordSuccessHandle"
          v-for="(item, i) in testList"
          :itemIndex="i"
          :playCurrIndex="playCurrIndex"
          @playCurrent="playCurrent"
          :key="item.id"
          :item="item"
        ></GroupItem>
      </div>
    </div>
    <Timetips ref="timetips"></Timetips>
  </div>
</template>

<script>
import { fetchGroupList, subTest } from "@/services/reverse";
import { findNextTarget } from "@/utils/tools";

import GroupItem from "./group-item";
import { mapState, mapMutations } from "vuex";
import { SUCCESS_CODE } from "@/utils/const";
import Timetips from "@/components/Timetips";
// import _ from "lodash";
export default {
  name: "GroupTest",
  components: {
    GroupItem,Timetips
  },
  data() {
    return {
      fromIndex: true,
      testList: [],
      recordScoreList: {},
      playCurrIndex: 0
    };
  },
  computed: {
    ...mapState({
      reverseStatus: (state) => state.reverseStatus,
      sentenceList: (state) => state.sentenceList,
      sentenceCurrent: (state) => state.sentenceCurrent,
    }),
  },
  watch: {},
  methods: {
    ...mapMutations(["setSentenceCurrent"]),
    async studyNext() {
      if (Object.keys(this.recordScoreList).length < this.testList.length) {
        this.$yxpConfirm({
          msg: "还有未检测的句子",
          type: "alert",
        })
          .then(() => {})
          .catch(() => {});
      } else {
        subTest({
          chapter_id: this.reverseStatus.chapters_id,
        });
        if (this.$route.query.index) {
          // 首页来的回首页
          this.$router.push("/reverse");
        } else {
          // 不是首页来的 看有没有下一句没有会列表，有的话回情景植入开始下一句
          let current = findNextTarget(
            this.sentenceList.list,
            this.sentenceCurrent.id,
            "pass",
            0
          );
          if (current && current.id >= 0) {
            this.setSentenceCurrent({ id: current.id });
            this.$router.push({
              path: "/reverse/scene-into",
            });
          } else {
            this.$router.push({
              path: "/reverse/grammar-sentence",
              query: { no_next: true },
            });
          }
        }
      }
    },
    playCurrent(index) {
      this.playCurrIndex = index
    },
    recordSuccessHandle(data) {
      this.recordScoreList[data.id] = data.score;
    },
    quitStudy() {
      this.$yxpConfirm({
        msg: "是否返回学习列表",
      })
        .then(async () => {
          if (Object.keys(this.recordScoreList).length === this.testList.length) {
            await subTest({
              chapter_id: this.reverseStatus.chapters_id,
            });
          }
          if (this.$route.query.index) {
            this.$router.push({
              path: "/reverse",
            });
          } else {
            this.$router.push({
              path: "/reverse/grammar-sentence",
            });
          }
        })
        .catch(() => {});
    },
  },
  created() {
    fetchGroupList({
      chapter_id: this.reverseStatus.chapters_id,
      curr_id: this.reverseStatus.curr_id,
    }).then((res) => {
      if (res.code === SUCCESS_CODE) {
        let test = res.data.map((v) => {
          return Object.assign(v, { clickNum: 0 });
        });
        this.testList = test;
      }
    });
  },
  mounted() {},
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
.group-test {
  display: flex;
  flex-direction: column;
  height: 100%;
  .chose-course-top {
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
    height: 80px;
    padding: 0 40px;
    background-color: #fff;
    .anticon {
      font-size: 24px; /* no */
    }
    .header-left {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .back-arrow {
        width: 30px;
        height: 27px;
        background-image: url("~assets/home/btn_back.png");
        background-size: 100%;
        cursor: pointer;
      }
    }

    .course-title {
      width: 100%;
      flex: 2;
      font-size: 20px;
      font-weight: 700;

      .check-title {
        color: #c7c7c7;
        padding: 0 15px;
      }
      .check__active {
        color: @primary-color;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          width: 23px;
          height: 4px;
          background-color: @primary-color;
          bottom: -8px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
    .btn-group {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .check-submit {
        width: 140px;
        height: 46px;
        font-size: 20px;
      }
    }
  }

  .group-test-list {
    flex: 1;
    overflow-y: auto;
    padding: 30px 0;

    .group-test-content {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>
